<template>
  <div class="cateManage">
       <Header>
      <span class="iconfont iconjiantou2" slot="left" @click="$router.back()"></span>
      <span slot="title">频道管理</span>
    </Header>
    <div class="unadd">
        <h3>删除频道</h3>
        <div>
            <span v-for="(cate,index) in cateList" :key="cate.id" @click="removeCate(index)">{{cate.name}}</span>
        </div>
    </div>
    <div class="add">
        <h3>添加频道</h3>
        <div>
            <span v-for="(cate,index) in addcateList" :key="cate.id" @click="addCate(index)">{{cate.name}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/header.vue';
import { getAllCate } from '../apis/cate.js';

export default {
    data() {
        return {
          cateList:[],
          addcateList:[]
        }
    },
components: {
    Header
  },
 async mounted() {
     if(localStorage.getItem('hasadded')) {
         this.cateList = JSON.parse(localStorage.getItem('hasadded'))
         this.addcateList = JSON.parse(localStorage.getItem('canadd'))
     }else {
          let res = await getAllCate();
    // console.log(res);
    // if(res.data.data.length !== 0) {
    this.cateList = res.data.data;
    if(localStorage.getItem('this_token')) {
       this.cateList = this.cateList.splice(2)
    }else {
       this.cateList = this.cateList.splice(1)
    }
    console.log( this.cateList);
    
     }
   
  },
  methods: {
      removeCate(index) {
          this.addcateList.push(this.cateList[index])
    // console.log( this.cateList);
          this.cateList.splice(index,1)
            localStorage.setItem('hasadded',JSON.stringify(this.cateList))
            localStorage.setItem('canadd',JSON.stringify(this.addcateList))

      },
      addCate(index) {
this.cateList.push(this.addcateList[index])
          this.addcateList.splice(index,1)
          localStorage.setItem('hasadded',JSON.stringify(this.cateList))
            localStorage.setItem('canadd',JSON.stringify(this.addcateList))
      }
  }
}
</script>

<style lang="less" scoped>
    .unadd,.add {
        // border-bottom: 1px solid #ccc;
        h3 {
            font-size: 24px;
            margin: 20px 0;
            padding: 0 10px;
        }
        div {
            display: flex;
            justify-content: space-left;
            flex-wrap: wrap;
            span {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            margin-left: 10px;
        }
        }
    }
</style>